
import React, { Component } from 'react'
import { connect } from 'react-redux'
import dayjs from "dayjs";
import { getInventoryLossList } from '@sagas/warehouse/stockManagement'
import DateRangePicker from "@common/presentational/DateRangePicker";
import { WarehouseSelect } from '@components/warehouse/WarehouseSelect'
import ParamsInput from "@common/presentational/ParamsInput";
import { withRouter } from "react-router-dom";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import { getQuery, handleQueryEqual, setQuery } from "@utils/setUrlQuery";
function mapStateToProps(state) {
    const { stockManagement, warehouseManagement } = state
    return {
        inventoryLossList: stockManagement.inventoryLossList,
        selectedWarehouse: warehouseManagement.selectedWarehouse
    }
}

@connect(
    mapStateToProps,
    {
        getInventoryLossList
    }
)
@withRouter
class BrokenRecord extends Component {
    constructor(props) {
        super(props)
        const {
            query = '',
            startDate = dayjs().subtract(1, 'month').add(1, 'days').format('YYYY-MM-DD'),
            endDate = dayjs().format('YYYY-MM-DD'),
            warehouseId = props.selectedWarehouse,
        } = getQuery(props.history)
        this.state = {
            tab: props.tab,
            query,
            startDate,
            endDate,
            warehouseId,
        }
        this.paginationInfo = {}
        this.tableRef = React.createRef()
        this.getTableInfo = this.getTableInfo.bind(this)
        this.showFormModal = this.showFormModal.bind(this)
    }

    showFormModal() {
        this.props.history.push(`/warehouse/create`)
    }

    setUrlQuery() {
        const { current, pageSize } = this.paginationInfo
        const { tab, query, startDate, endDate, warehouseId, } = this.state
        const { history } = this.props
        let params = {
            tab,
            query,
            startDate, endDate,
            warehouseId, current, pageSize
        }
        handleQueryEqual(params, history) || setQuery(params, history)
    }

    getTableInfo({ current, pageSize } = this.paginationInfo) {
        this.paginationInfo = { current, pageSize }
        const { query, startDate, endDate } = this.state
        const { warehouseId } = this.state
        this.setUrlQuery()
        const params = {
            id: warehouseId,
            startDate,
            endDate,
            pageNo: current,
            pageSize,
        }
        if (query) {
            params.queryKeywords = query
        }
        warehouseId && this.props.getInventoryLossList(params)
    }

    getTableParams = () => {
        const { inventoryLossList } = this.props
        const columns = [{
            title: '报损时间',
            dataIndex: 'create_time',
            key: 'create_time'
        },{
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
            render: (text,record) => record.remark.name
        },{
            title: '分类',
            dataIndex: 'type',
            key: 'type',
            render: (text,record) => record.remark.type
        },  {
            title: '报损数量',
            dataIndex: 'quantity',
            key: 'quantity',
        }, {
            title: '报损原因',
            dataIndex: 'memo',
            key: 'memo',
            render: (text,record) => record.remark.memo
        }];
        const tableData = (inventoryLossList.details || []).map((loss, index) => ({
            ...loss,
            key: `loss_${index}`,
        }))
        return {
            columns,
            tableData,
            total:inventoryLossList.total
        }
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    handleValueChange(key, value) {
        if (key === 'dateRange') {
            this.setState({
                ...value
            }, this.initTable)
            return;
        }
        this.setState({
            [key]: value
        }, this.initTable)
    }

    showMaterialModal({ data } = {}) {
        const ref = this.refs['materialModal']

        if (ref) {
            ref.show({ data })
        }
    }

    render() {
        const { columns, tableData, total } = this.getTableParams()
        const { startDate, endDate, query, warehouseId } = this.state
        return (
            <div>
                <div className="table-params page-params flex-vertical-center mgb-16">
                    <WarehouseSelect
                        className="mgl-16"
                        value={warehouseId}
                        onChange={this.handleValueChange.bind(this, 'warehouseId')}
                    />
                    
                    <DateRangePicker
                        className="mgl-16"
                        startDate={startDate}
                        endDate={endDate}
                        onChange={this.handleValueChange.bind(this, 'dateRange')}
                        beforeNow
                    />
                    <ParamsInput
                        className="mgl-16"
                        style={{ width: '200px' }}
                        value={query}
                        onChange={this.handleValueChange.bind(this, 'query')}
                        placeholder="商品搜索"
                    />
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="warehouseList" onChange={this.getTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={columns}
                            dataSource={tableData || []}
                            pagination
                        />
                    </div>
                    <div className="table-pagination">
                        <CustomizeTablePagination
                            total={total}
                        />
                    </div>
                </CustomizeTableProvide>

            </div>
        )
    }
}

export default BrokenRecord